接值
通过方法的参数来接收请求传来值
请求时传值的方式有三种方式 :
-
URL?name=value
-
form表单
-
Ajax异步传值
接收传来的值有三类 :
-
单一值
-
对象
-
数组
传值
URL?传值
URL?标识1=值1&标识2=值2
URL后面使用 ?
连接参数, 每组参数使用 =
连接标识与值, 多组参数使用 &
连接
以 超链接为例 , 通过URL? 进行传值
<a href="/test/test04?name=wang&age=12" rel="external nofollow" >test04</a> <br>
form表单传值
<input name="标识" value="值">
在表单中 可以 , , 等标签传递值, name属性
是传值的标识 , value属性
是要传递的值
以 表单为例, 进行传值
<form action="/test/test04" method="post" > <input name="name" value="wang"> <input name="age" value="12"> <input type="submit" value="提交"> </form>
Ajax异步传值
var data = { "标识1" : "值1", "标识2" : "值2" }
将 要传递的信息封装成 JSON 结构, 通过 Ajax异步进行传值
这里使用 JQuery 的 Ajax
写法 , 修改 fn 函数
function fn() { var url = "/test/test04"; var data = {"name":"wang", "age":12}; $.ajax({ async: true, type: "POST", url: url, data: data }) }
接单一值
通过 方法的参数接单一结构的值
在Controller类中增加 test04 方法
@RequestMapping("/test/test04") public String test04(String name , Integer age){ System.out.println("name = " + name); System.out.println("age = " + age); System.out.println(" controller 中的测试方法 test 04 "); return "ref"; }
在页面上分别点击 , 进行传值测试 在idea的控制台都可以看到接收到的值
注意 要测试 Ajax 页面要导入 JQuery的依赖 js 包
@RequestParam注解
在不使用 @RequestParam注解 的情况要 , 方法形式参数的名 要与传值的标识对应
使用@RequestParam注解后, 可以通过注解与传值的标识对应, 而方法的形式参数名就不受限制
修改 test04方法为 name参数增加 @RequestParam注解
, 并通过注解与传值标识匹配
@RequestMapping("/test/test04") public String test04(@RequestParam("name") String n , Integer age){ System.out.println("name = " + n); System.out.println("age = " + age); System.out.println(" controller 中的测试方法 test 04 "); return "ref"; }
现在测试依然能得到 打印结果
@RequestParam注解属性
但 使用了@RequestParam注解后就必须传递对应的参数
当然也可以通过设置@RequestParam注解的属性进行调整
将页面表单中的 注释掉
<form action="/test/test04" method="post" ><!-- <input name="name" value="wang">--> <input name="age" value="12"> <input type="submit" value="提交"> </form>
再测试, 会报 400 异常
修改 @RequestParam注解的属性
required
: 是否是必须的
defaultValue
: 没有接到值时, 默认设置的值
@RequestMapping("/test/test04") public String test04(@RequestParam(value = "name", required = false, defaultValue = "hello") String n , Integer age){ System.out.println("name = " + n); System.out.println("age = " + age); System.out.println(" controller 中的测试方法 test 04 "); return "ref"; }
对象接值
将传递信息封装成实体类对象, 通过实体类对象接值
创建实体类User
创建 entity 包(文件夹) , 在entity包(文件夹)下创建User实体类
User实体类
package com.yuan.entity;import lombok.Data;@Datapublic class User { private String name; private Integer age;}
增加新的处理方法
添加test05方法, 参数为 User 类
@RequestMapping("/test/test05") public String test05(User user){ System.out.println("name = " + user.getName()); System.out.println("age = " + user.getAge()); System.out.println(" controller 中的测试方法 test 05 "); return "ref"; }
修改页面并测试
修改start.html页面请求URL
<a href="/test/test05?name=wang&age=12" rel="external nofollow" >test05</a> <br> <form action="/test/test05" method="post" > <input name="name" value="wang"> <input name="age" value="12"> <input type="submit" value="提交"> </form>
在浏览器发语法 , 就可以在idea控制台看到接收到信息
数组接值
传数组
多个相同的传值标识, 可以传递数组
修改start.html页面
<a href="/test/test06?ids=1&ids=2&ids=3" rel="external nofollow" >test06</a> <br> <form action="/test/test06" method="post" > <input name="ids" value="1"> <input name="ids" value="2"> <input name="ids" value="3"> <input type="submit" value="提交"> </form>
增加接值方法test06并测试
@RequestMapping("/test/test06") public String test06(Integer[] ids){ System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids)); System.out.println(" controller 中的测试方法 test 06 "); return "ref"; }
Ajax传数组一
传递 JS数组结构
修改start.html页面
function fn() { var url = "/test/test07"; // var data = { "ids" : [1, 2, 3] }; var idss = $("[name=ids]").map(function () { return this.value }).get() var data = {"ids": idss} $.ajax({ async: true, type: "POST", url: url, data: data }); }
添加新的接值方法test07并测试, 注意这里增加 @RequestParam("ids[]")
注解
@RequestMapping("/test/test07") public String test07(@RequestParam("ids[]") Integer[] ids){ System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids)); System.out.println(" controller 中的测试方法 test 07 "); return "ref"; }
字符串传数组
用 “,” 将信息连接成一个字符串进行传递
修改start.html页面
<a href="/test/test06?ids=1,2,3" rel="external nofollow" >test06</a> <br> <form action="/test/test06" method="post" > <input name="ids" value="1,2,3"> <input type="submit" value="提交"> </form>
使用接值方法test06并测试
@RequestMapping("/test/test06") public String test06(Integer[] ids){ System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids)); System.out.println(" controller 中的测试方法 test 06 "); return "ref"; }
Ajax传数组二
从 表单中获取数据, 组成数组, 再将数组使用 ","连接起来
修改start.html页面
function fn() { var url = "/test/test06"; var idss = $("[name=ids]").map(function () { return this.value }).get() console.log(idss) var data = {"ids": idss.join(",")} $.ajax({ async: true, type: "POST", url: url, data: data }); }
使用接值方法test06并测试
@RequestMapping("/test/test06") public String test06(Integer[] ids){ System.out.println("Arrays.toString(ids) = " + Arrays.toString(ids)); System.out.println(" controller 中的测试方法 test 06 "); return "ref"; }